<template>
  <div class="app-container">
    <avue-crud
      :option="option"
      :data="data"
      :table-loading="loading"
      :page.sync="page"
      @on-load="onLoad"
      @current-change="currentChange"
      @search-change="searchChange" @search-reset="resetChange"
    >
      <template slot-scope="scpoe" slot="menu">
        <el-button
          icon="el-icon-view"
          size="small"
          type="text"
          @click="viewPage(scpoe.row,scpoe.index)"
          >查看</el-button
        >
      </template>
    </avue-crud>
    <el-dialog title="详情" :visible.sync="box" width="50%" center>
        <div class="avue_detail">
          <el-tabs v-if="dataList.companyBaseInfo">
              <el-tab-pane label="企业信息">
                  <table class="detailtable">
                    <tr>
                        <td width="20%">企业名称</td>
                        <td>{{dataList.companyBaseInfo.qymc}}</td>
                        <td width="25%">统一社会信用代码</td>
                        <td>{{dataList.companyBaseInfo.shtyxydm}}</td>
                    </tr>
                    <tr>
                        <td width="20%">注册时间</td>
                        <td>{{dataList.companyBaseInfo.clrq}}</td>
                        <td width="25%">注册资金</td>
                        <td>{{dataList.companyBaseInfo.zczb}}万元</td>
                    </tr>
                    <tr>
                        <td width="20%">所属行业</td>
                        <td>{{dataList.companyBaseInfo.sshy}}</td>
                        <td width="25%">所属区域</td>
                        <td>{{dataList.companyBaseInfo.ssqu}}</td>
                    </tr>
                    <tr>
                        <td width="20%">企业类型</td>
                        <td>{{dataList.companyBaseInfo.qylx}}</td>
                        <td width="25%">联系方式</td>
                        <td>{{dataList.companyBaseInfo.dh}}</td>
                    </tr>
                    <tr>
                        <td width="20%">注册地址</td>
                        <td colspan="3">{{dataList.companyBaseInfo.zs}}</td>
                    </tr>
                </table>
              </el-tab-pane>
          </el-tabs>
<!--          <el-tabs v-if="dataList.companyCorporateInformation">-->
<!--              <el-tab-pane label="法人信息">-->
<!--                  <table class="detailtable">-->
<!--                    <tr>-->
<!--                        <td width="20%">法人姓名</td>-->
<!--                        <td>{{dataList.companyCorporateInformation.xm}}</td>-->
<!--                        <td width="25%">性别</td>-->
<!--                        <td>{{dataList.companyCorporateInformation.xb}}</td>-->
<!--                    </tr>-->
<!--                    <tr>-->
<!--                        <td width="20%">出生日期</td>-->
<!--                        <td>{{dataList.companyCorporateInformation.csrq}}</td>-->
<!--                        <td width="25%">学历</td>-->
<!--                        <td>{{dataList.companyCorporateInformation.xl}}</td>-->
<!--                    </tr>-->
<!--                    <tr>-->
<!--                        <td width="20%">证件号码</td>-->
<!--                        <td>{{dataList.companyCorporateInformation.sfzjhm}}</td>-->
<!--                        <td width="25%">联系方式</td>-->
<!--                        <td>{{dataList.companyCorporateInformation.lxdh}}</td>-->
<!--                    </tr>-->
<!--                </table>-->
<!--              </el-tab-pane>-->
<!--          </el-tabs>-->
          <el-tabs v-if="dataList.jrfkQysyyged">
              <el-tab-pane label="测算信息">
                  <el-table :data="dataList.jrfkQysyyged" border :header-cell-style="{background:'#f2f9fe'}">
                      <el-table-column prop="sxcp" label="测算产品" align="center"></el-table-column>
                      <el-table-column prop="cped" label="产品额度(万元)" align="center"></el-table-column>
<!--                      <el-table-column prop="csjg" label="测算机构" align="center"></el-table-column>-->

                      <el-table-column prop="edqj" label="授信预估额度(万元)" align="center"></el-table-column>
                    <el-table-column prop="csscrq" label="测算生成日期" align="center"></el-table-column>
                    <el-table-column prop="csyxjzrq" label="测算有效截止日期" align="center"></el-table-column>
                  </el-table>
              </el-tab-pane>
          </el-tabs>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { searchLimit } from "@/api/manager";
import {
  getInfoByList,
  getDetail,
} from '@/api/gradManage.js'
export default {
  data() {
    return {
      loading: false,
      /* 分页 */
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        background:false
      },
      dataList:{},
      box: false,
      /* 额度预估 */
      edTab: [
        {
          in: 1,
          jg: "建设银行",
          mc: "装修贷",
          yg: 30,
          fs: "信用",
          sj: "2012.1.1 19:12:23",
        },
        {
          in: 2,
          jg: "江苏银行",
          mc: "信易贷",
          yg: 30,
          fs: "信用",
          sj: "2012.1.1 19:12:23",
        },
      ],
      /* 贷款额度 */
      dkTab: [
        {
          in: 1,
          jg: "北京银行",
          fs: "信用",
          ll: "8.4%",
          frq: "2021.01.01",
          drq: "2035.01.01",
          dkff: "20",
          je: "8",
          qx: 20000,
          yqje: "无",
        },
        {
          in: 2,
          jg: "北京银行",
          fs: "信用",
          ll: "8.4%",
          frq: "2021.01.01",
          drq: "2035.01.01",
          dkff: "10",
          je: "8",
          qx: 20000,
          yqje: "2021.1 2000元",
        },
        {
          in: 3,
          jg: "北京银行",
          fs: "信用",
          ll: "8.4%",
          frq: "2021.01.01",
          drq: "2035.01.01",
          dkff: "24",
          je: "0",
          qx: 0,
          yqje: "无",
        },
      ],
      data: [
        /* {
          qymc: "宇科信息技术有限公司",
          xydm: "1151162400889155",
          qylx: "2",
          fr: "张利仁",
          ffje: "90",
          dkje: "10",
          pf: "98",
          ed: "20",
        },
        {
          qymc: "早点包子铺",
          xydm: "1151162400889155",
          qylx: "5",
          fr: "张爱梅",
          ffje: "90",
          dkje: "10",
          pf: "91",
          ed: "30",
        }, */
      ],
      searchList:{},
      option: {
        headerAlign: "center",
        align: "center",
        border: true,
        card: true,
        defaultExpandAll: true,
        dialogDrag: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        menu:false,
        searchLabelWidth: '35%',
        searchSpan: 6,
        searchMenuSpan: 4,
        column: [
          {
            label: "企业名称",
            prop: "qymc",
            search: true,
          },
          {
            label: "统一社会信用代码",
            prop: "shtyxydm",
            search: true,
          },
          {
            label: "测算产品",
            prop: "sxcp",
          },
          {
            label: "授信预估额度(万元)",
            prop: "edqj",
          },
          // {
          //   label: "测算机构",
          //   prop: "csjg",
          // },
          {
            label: "测算生成日期",
            prop: "csscrq",
          },
          {
            label: "测算有效截止日期",
            prop: "csyxjzrq",
          }
        ],
      },
    };
  },
  created(){
    this.getDict();
  },
  methods: {
    onLoad(page, params = {}) {
      let searchList = this.searchList
      Object.assign(params, {
          ...searchList,
          pageNum: this.page.currentPage,
          pageSize: this.page.pageSize
      });
      /* if (page.layout) {
        Object.assign(params, {
          pageNum: this.page.currentPage,
          pageSize: this.page.pageSize,
        });
      } else {
        Object.assign(params, page);
      } */
      this.loading = true;
      getInfoByList(params).then(data => {
        if (data.status) {
          this.loading = false;
          this.data = data.data.records;
          this.page.total = data.data.total;
        }
      });
    },
    async getDict() {
      const dataQYLX = await this.$store.dispatch('asyncApi/getDict', {
        code: 'QYLX'
      });
      this.option.column[2].dicData = dataQYLX;
    },
    /* 搜索筛选 */
    searchChange(params, done) {
      done();
      this.page.currentPage = 1;
      this.page.pageSize = 10;
      this.searchList = {...params}
      this.onLoad();
    },/* 清空 */
    resetChange() {
      this.page.currentPage = 1;
      this.page.pageSize = 10;
      this.searchList = {}
      this.onLoad();
    },
    /* 改变页码 */
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    /* 查看 */
    viewPage(row,index) {
      this.dataList = {}
      getDetail({shtyxydm:row.shtyxydm}).then(data => {
        if (data.status) {
          this.box = true;
          let {companyBaseInfo,companyCorporateInformation,jrfkEdcx} = data.data;
          this.dataList = {
            companyBaseInfo:companyBaseInfo ? companyBaseInfo : {},
            companyCorporateInformation:companyCorporateInformation ? companyCorporateInformation : {},
            jrfkQysyyged:jrfkEdcx ? jrfkEdcx : []
          }
        }else{
          this.$message.error(data.msg);
        }
      });
      
    },
  },
};
</script>

<style scoped="scoped" lang="scss">
$bb: 1px solid #eaeaea;
/deep/ .avue-crud__pagination{
    text-align: center;
}
.avue_detail {
  .h_label {
    color: #3a3f63;
    font-weight: 600;
    padding: 10px 0;
  }

  .bb {
    border-bottom: $bb;
  }

  .lh {
    line-height: 35px;
    margin-top: 15px;

    .el-col-14 {
      font-size: 0.8rem;
    }
  }

  .c {
    color: #409eff;
  }
}
.detailtable{width: 100%; border-collapse: collapse; border-spacing: 0; border:#e5e5e5 solid 1px;}
.detailtable tr{width: 100%;}
.detailtable td{ padding: 8px 10px; text-align: left; line-height: 24px; font-size: 14px; color:#434343;  border:#e5e5e5 solid 1px;}
.detailtable td{font-weight: normal; background-color:#fff}
.detailtable td{word-break:break-all;}
</style>
